import styled from "styled-components";

const IconStyle = styled.i`
display: inline-block;
line-height: ${props => {
      return props.size ? props.size : '.16rem';
   }};
   background-color: ${props => props.bgColor ? props.bgColor : 'transparent'};
   padding: ${props => props.padding ? props.padding : '.05rem'};
${props=>{
      if(props.type==='large') return 'border-radius:.1rem;';
      return 'border-radius:50%;'
}}
font-size:  ${props => props.size ? props.size : '.16rem'};
>svg{
vertical-align: middle;
width:${props => props.size ? props.size : '.16rem'} ;
height: ${props => props.size ? props.size : '.16rem'};
&> path:nth-child(2){
   width: 11px;
fill:${props => props.color ? props.color : '#333333'} ;
}
}

`

export {
   IconStyle
}